<template>
  <div v-if="imageData">
    <ImageButton :checkItem="checkItem" @success="fetchData"></ImageButton>
    <ImageTable :imageData="imageData" @checkItem="chengeItem"></ImageTable>
  </div>
  <div v-else>
    <van-empty description="数据请求失败！" />
  </div>
</template>

<script>
import ImageButton from '@/components/image/ImageButton'
import ImageTable from '@/components/image/ImageTable'
export default {
  data () {
    return {
      imageData: null,
      checkItem: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    // 处理选中
    chengeItem (data) {
      this.checkItem = data
    },
    // 请求镜像数据
    fetchData () {
      const parse = {
        data: {
          docker: 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/images/json?all=true"'
        }
      }
      this.$post(parse, res => {
        this.imageData = JSON.parse(res)
      })
    }
  },
  components: {
    ImageButton,
    ImageTable
  }
}
</script>
